<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 和VueComponent的关系</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>

    <!--
        1.VueComponent.prototype.__proto__ ===Vue.prototype
        2.vue让组件实例对象（vc）可以访问到Vue原型上的属性和方法
    -->

    <div id="root">
        <student></student>

        <!--vue 和VueComponent的关系图-->
        <img src="./js/vue与vuecomponent的关系.png" />


    </div>

</body>


<script>
    //Vue原型上加属性和方法,用VueComponent来访问
    Vue.prototype.xx = 30

    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: "邓紫棋",
                age: 18
            }
        },
        created() {
            this.showname()

        },

        methods: {
            showname() {
                console.log(this) //this是VueComponent
                console.log(this.__proto__.xx) //用VueComponent访问 Vue.prototype上的xx =30

            }
        }
    })


    //组件student的返回值是：VueComponent
    console.log(student)




    //所有组件都被vm来支配怎么用
    new Vue({
        el: "#root",
        data: {},


        created() {
            this.vos()

        },

        //局部注册组件
        components: {
            student
        },
        methods: {
            vos() {
                console.log(this) //this是vue实例对象
            }
        }
    })
</script>

</html>